﻿@using System.Globalization
@using GlobalResources
@using Microsoft.Azure.Devices.Applications.RemoteMonitoring.DeviceAdmin.Web.Security

<div class="device_list_column_editor_container">
    <div class="name_selector_container">
        <input class="name_selector__text" placeholder="Property or tag name" data-bind="textInput: nameSelectorText" />
        <button class="button_base name_add__button" data-bind="enable: nameSelectorText()"><img class="name_add__button_image" src="~/Content/img/column_add.svg" /></button>
    </div>
    <div class="header_grid header_grid_general">
        <h3 class="grid_subheadhead_detail">@Strings.SelectedColumns</h3><h3 class="grid_subheadhead_detail"><a class="device_list_columns_loaddefault_text">@Strings.LoadDefault</a></h3>
    </div>
    <div class="device_list_columns_container">
        <section class="details_grid_columns" id="selectedColumnsGrid">
            <div data-bind="foreach: columns">
                <div class="device_list_columns_item">
                    <!--ko if: $parent.editingItem() != $data -->
                    <div data-bind="click: $parent.edit">
                        <span data-bind="text: alias" /> (<span data-bind="text: name" />)
                    </div>
                    <!-- /ko -->
                    <!--ko if: $parent.editingItem() == $data -->
                    <input class="device_list_columns_displayname_text" data-bind="textInput: alias, event: {keypress: $parent.checkKey, blur: $parent.close}" />
                    <!-- /ko -->
                    <div class="device_list_columns_toolbar">
                        <!--ko if: $parent.editingItem() != $data -->
                        <img src="~/Content/img/edit_name.svg" title="@Strings.EditDisplayName" class="device_list_columns_toolbar_button" data-bind="click: $parent.edit" />
                        <img src="~/Content/img/column_up.svg" class="device_list_columns_toolbar_button" data-bind="click: $parent.moveUp" />
                        <img src="~/Content/img/column_down.svg" class="device_list_columns_toolbar_button" data-bind="click: $parent.moveDown" />
                        <!--ko ifnot: $parent.isReserved($data) -->
                        <img src="~/Content/img/column_delete.svg" class="device_list_columns_toolbar_button" data-bind="click: $parent.remove" />
                        <!-- /ko -->
                        <!--ko if: $parent.isReserved($data) -->
                        <img class="device_list_columns_toolbar_button_disabled" />
                        <!-- /ko -->
                        <!-- /ko -->
                    </div>
                </div>
            </div>
        </section>
    </div>
    <div class="device_list_columns_button_container">
        @if (PermsChecker.HasPermission(Permission.SaveDeviceListColumnsAsGlobal))
        {
            <div class="device_list_columns_save_default">
                <label class="grid_detail_label"><input type="checkbox" id="chkSaveDefault" /> @Strings.SaveAsDefault</label>
            </div>
        }
        <button type="button" onclick="IoTApp.DeviceListColumns.close()" class="button_base button_secondary button_cancel button_no_left_margin">
            @Strings.Cancel
        </button>
        <button type="button" onclick="IoTApp.DeviceListColumns.updateColumns($('#chkSaveDefault').is(':checked')); $('#chkSaveDefault').prop('checked', false);" class="button_base">
            @Strings.Update
        </button>
    </div>
</div>
<script>
    IoTApp.DeviceListColumns.setColumns(@Html.Raw(Model));
</script>
